<template>
  <div class="about">
    <p>homeAge: {{ homeStore.homeAge }}</p>
    <button @click="setAge">age++</button>
    <p>购物车: {{ cartNum }}</p>
    <p>购物车: {{ cartNum }}</p>
    <button @click="setNum">num++</button>
  </div>
</template>

<script lang="ts" setup>
import { apis } from "@/http/api";
import { toRef } from "vue";
import useHome from "@/stores/useHome";
import useCart from "@/stores/useCart";
const homeStore = useHome(); // 得到的一个store对象，就可以通过store对象，调用属性调用方法。等价于this.$store
const setAge = () => {
  homeStore.homeAge++; // this.$store.state.homeAge;
};

const cartStore = useCart();
const cartNum = toRef(cartStore, "cartNum");
const setNum = () => {
  cartStore.addCartNum();
  // if (cartNum.value < 1) {
  //   console.log("至少是一件");
  // } else {
  //   if (cartNum.value < 10) {
  //     cartNum.value++;
  //   } else {
  //     console.log("库存不够");
  //   }
  // }
};

const result = await apis.getHomeCourse(Date.now());
console.log("result : ", result);

const users = await apis.getUsers();
console.log("users : ", users);
</script>
